<template>
    <div class="page-box">
        <div id="ajax-hook"></div>
    <div class="wrap">
        <div class="wpn">
            <div class="form-data pos">
                <a href=""><img src="../../../static/img/logo.png" class="head-logo"></a>
                <!--<p class="tel-warn hide"><i class="icon-warn"></i></p>-->
                <form autocomplete = "off">
                    <p class="p-input pos">
                        <!-- <label for="tel">手机号</label> -->
                        <input type="number" id="mobile" v-model="mobile" autocomplete="off" placeholder="手机号">
                        <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos" id="sendcode">
                        <!-- <label for="veri-code">输入验证码</label> -->
                        <input type="number" id="veri-code" v-model="sms_code" autocomplete="off"  placeholder="输入验证码">
                        <a href="javascript:;" class="send" @click="sendSms">发送验证码</a>
                        <span class="time hide"><em>120</em>s</span>
                        <span class="error hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                    </p>
                    <p class="p-input pos">
                        <input type="number" id="nickname" v-model="nickname" autocomplete="off" placeholder="昵称"  >
                        <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos">
                        <input type="text" id="emailsss" v-model="email" autocomplete="off" placeholder="邮箱号"  >
                        <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos hide" id="pwd">
                        <input type="password" style="display: none"/>
                        <input type="password" id="password" v-model="password"  placeholder="输入密码">
                        <span class="tel-warn pwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                    </p>
                    
                </form>
                <div class="reg_checkboxline pos">
                    <!-- <span class="z"><i class="icon-ok-sign boxcol" nullmsg="请同意!"></i></span>
                    <input type="hidden" name="agree" value="1">
                    <div class="Validform_checktip"></div> -->
                    <p>我已阅读并接受 <a href="#" target="_brack">《XXXX协议说明》</a></p>
                </div>
                <button class="lang-btn" @click="doRegister">注册</button>
                <div class="bottom-info">已有账号，<a href="/login">马上登录</a></div>
                <div class="third-party">
                    <a href="#" class="log-qq icon-qq-round"></a>
                    <a href="#" class="log-qq icon-weixin"></a>
                    <a href="#" class="log-qq icon-sina1"></a>
                </div>
                <p class="right">Powered by © 2018</p>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      msg: '登录页',

      sms_code:'', 
      nickname:'', 
      gender:'', 
      mobile:'18314440364', 
      avatar:'', 
      email:'', 
      password:'', 
    }
  },
  methods: {
			doRegister(){
        console.log('注册')
        var that = this;
        if(this.mobile.length != 11){
          // this.$message('请输入正确的手机号码');
          this.$toast.center('请输入正确的手机号码');
          return false;
        }
        if(this.login_type == 'message' && this.sms_code.length < 3){
          this.$toast.center('请输入验证码');
          // this.$message('请输入验证码');
          return false;
        }
        
        var reqObj = {
          mobile:this.mobile,
          sms_code:this.sms_code,
          nickname:this.nickname,
          gender:this.gender,
          avatar:this.avatar,
          email:this.email,
          password:this.password,
        };
        // this.$loading('注册中...');
        this.$api.login(reqObj).then((res)=>{
            // that.$loading.close();
            // this.$message(res.msg);
            this.$toast.center(res.msg);
            if(res.code == 200){
              // 注册成功
              console.log('注册成功')
              this.$router.push({path:'/login'})
            }
        }).catch(error => {
          // that.$loading.close();
            console.log('失败', error)
            this.$toast.center('出错啦');
            // this.$message('出错啦');
        })
			},
      sendSms(){
        if(this.mobile.length != 11){
          this.$toast.center('请输入正确的手机号码');
          // this.$message('请输入正确的手机号码');
          return false;
        }
        this.$api.sendSmsCode(this.mobile,2).then((res)=>{
            // this.$message(res.msg);
            this.$toast.center(res.msg);
        }).catch(error => {
            console.log('失败', error)
            this.$toast.center('出错啦');
            // this.$message('出错啦');
        })
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../../../static/css/login/login.css';
.page-box {
  margin:0;padding:0;
  color:#34495e;font:12px/1.5 Microsoft Yahei,Helvetica Neue;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga","kern";
  background-color: #3895e8;
}


.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ok-sign:before { content: "\e6d1"; }
</style>
